<template>
  <div class="container">
    <!-- 放大镜组件 -->
    <VueMagnifierTing :imgUrl="imgUrl"
                      :isGlass="true"
                      :width="500"
                      :height="300"
                      :glassOption="glassOption"></VueMagnifierTing>

    <!-- 鼠标或按钮缩放组件，并可标记定点 -->
    <VueMagnifierTing ref="zoomComponent"
                      :spots="spots"
                      :imgUrl="imgUrl"
                      height="50vh"
                      :isNeedPoint="isNeedPoint"
                      style="color: #4473b7"
                      @dblclick-point="addPoint"
                      @click-point="handleProint">
    </VueMagnifierTing>

    <div class="button">
      <button @click="handleZoom('enlarged')">放大</button>
      <button @click="handleZoom('reduce')">缩小</button>
      <button @click="handleRotate">旋转</button>
      <button @click="handleRest">还原</button>
    </div>
  </div>
</template>

<script>
import VueMagnifierTing from '../index'
const imgUrl = require('./assets/image/mapTest.png')
export default {
  name: '',

  props: {},
  components: {
    VueMagnifierTing,
  },
  data() {
    return {
      imgUrl,
      spots: [
        {
          left: 150,
          top: 130,
          title: '定位标题',
        },
      ],
      isNeedPoint: true,
      glassOption: {
        width: 150,
        height: 150,
        scale: 1.5,
      },
    }
  },
  methods: {
    handleZoom(type) {
      this.$refs.zoomComponent.handleZoom(type)
    },
    handleRotate() {
      this.$refs.zoomComponent.handleRotate()
    },
    handleRest() {
      this.$refs.zoomComponent.handleRest()
    },
    addPoint(spots) {
      this.spots.push({
        ...spots,
      })
    },
    handleProint(info) {
      console.log('标记点信息：', info)
    },
  },
}
</script>

<style scoped>
</style>
